import React, { useEffect, useState } from 'react'
import { 
  Table, 
  Button, 
  Popconfirm, 
  message,
  Tag
} from 'antd';
import {store} from '../../../store'
import { 
  DeleteOutlined, 
  EditOutlined, 
  VerticalAlignTopOutlined 
} from '@ant-design/icons';

export default function Draft(props) {
  const [datas, setDatas] = useState([])
console.log(store.getState(), '草稿')
  useEffect(() => {
    setDatas(store.getState().newsList)
  }, [datas])
// const data = store.getState().newsList
  const columns = [
    {
      title: 'ID',
      dataIndex: 'roleId',
      align: 'center',
      key: 'roleId',
    },
    {
      title: '新闻标题',
      dataIndex: 'note',
      align: 'center',
      render: (text, record) => {
        return (
          <>
            <a href={`#/news-manage/preview/${record.roleId}`} style={{color: 'red'}}>{record.note}</a>
          </>
        )
      }
    },
    {
      title: '作者',
      dataIndex: 'author',
      align: 'center',
      key: 'author',
    },
    {
      title: '新闻分类',
      key: 'gender',
      align: 'center',
      dataIndex: 'gender'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, record, index) => (
        <>
          <Popconfirm
            title="是否确认删除"
            onConfirm={() => confirm(index)}
            onCancel={cancel}
            okText="是"
            cancelText="否"
          >
            <Button 
              type="primary" 
              shape="circle" 
              icon={<DeleteOutlined />}
            />
          </Popconfirm>
          <Button 
            onClick={() => edit(record.roleId)} 
            type="primary" 
            shape="circle" 
            icon={<EditOutlined />} 
          />
          <Button 
            type="primary" 
            shape="circle" 
            icon={<VerticalAlignTopOutlined />} 
            onClick={() => handleCheck(record)}
          />
        </>
      ),
    },
  ];
  function handleCheck(record) {
    console.log(record)
    let action = {
      type: 'handleCheck',
      value: record
    }
    store.dispatch(action)
    props.history.push('/audit-manage/list')
  }
  function edit(id) {
    props.history.push(`/news-manage/update/${id}`)
  }
  function confirm(index) {
    console.log(index);
    let action = {
      type: 'delete',
      value: index
    }
    store.dispatch(action)
    message.success('Click on Yes');
  }
  
  function cancel(e) {
    console.log(e);
    message.error('Click on No');
  }
  
 

  return (
    <div>
      <Table 
        columns={columns} 
        dataSource={datas}
        rowKey={item => item.roleId} 
      />
    </div>
  )
}
